<template>
  <el-row>

    <!--  查询条件与地图  -->
    <el-row :gutter="15">

      <Elcard style="height: 20vh">
        <div slot="header">
          <span>查询条件</span>
          <el-button
              @click="resettingSelectOption"
              style="float: right"
              type="primary"
              size="mini">
            重置查询条件
          </el-button>
        </div>

        <SelectForm
            :districtOptions="districtOptions"
            @resetSelectForm="resettingTable"
            @selectChange="selectChange"
            @getDistrictOptionSuccess="getDistrictOptionSuccess"
            :Reset="resettingFlag"
        />

      </Elcard>
    </el-row>

    <!--  表格  -->
    <el-row
        style="margin-top: 1vh">

      <ElCard style="height: auto">
        <div slot="header">
          <span>监测人员名单</span>
          <el-button
              size="mini"
              type="primary"
              style="float: right"
              @click="addMobile">添加
          </el-button>
        </div>
        <Table
            :selectForm="selectForm"
            :districtOptions="taizhanOptions"
            :flushTable="flushTable"
            @getWorkPath="getWorkPath"
        />
      </ElCard>
    </el-row>

    <!---------------------  弹窗  ------------------>

    <!--  添加频点分类  -->
    <Dialog
        :visiable="addMobileVisiable"
        @close="addMobileVisiable=false"
        :info="{title:'添加监测人员',width:'25%'}"
        top="20vh"
    >
      <addFreqType
          :districtOptions="taizhanOptions"
          @addSuccess="addSuccess"
      />
    </Dialog>

  </el-row>
</template>

<script>
// ---------------- element-ui ------------------
import Elcard from "../../../../components/element-ui/elCard"
import Dialog from "../../../../components/element-ui/dialog"
// --------------- 自定义组件 ------------------
import SelectForm from "./monitorManage-cpt/selectForm"
import Table from "./monitorManage-cpt/table"
import addFreqType from "./monitorManage-cpt/addFreqType";

export default {
  components: {
    Elcard, Dialog, SelectForm, Table, addFreqType
  },
  methods: {
    // ---------------- 功能 -------------------
    /**
     * 重置查询表单
     * */
    resettingSelectOption: function () {
      this.resettingFlag = !this.resettingFlag;
    },

    /**
     * 添加新手机
     */
    addMobile: function () {
      this.addMobileVisiable = true;
    },

    /**
     * 获取所属地区成功
     * @param val
     */
    getDistrictOptionSuccess: function (val) {
      this.districtOption = val;
    },

    /**
     * 添加手机成功,刷新表格
     */
    addSuccess: function () {
      this.flushTable = !this.flushTable;
      this.addMobileVisiable = false;
    },

    /**
     * 获取工作路径
     * @param val
     * @returns {number}
     */
    getWorkPath: function (val) {
      this.workPath = val.path;
      this.currMobileName = val.name;
    },

    /**
     * 选择地区成功
     * @param val
     */
    selectChange: function (val) {
      if (val.type === 0) {
        val.type = undefined;
      }
      this.selectForm = val;
    },

    /**
     * 重置查询项 刷新表格
     */
    resettingTable: function () {
      this.flushTable = !this.flushTable;
    }
  },
  data() {
    return {
      showSatelite: true,
      showSateliteDialog: true,
      // ----------- 弹窗 -------------
      isMapVisiable: false,
      addMobileVisiable: false,
      // ---------- 查询表单 ------------
      resettingFlag: false,
      flushTable: false,
      selectForm: {},
      //   ----------- 功能 ------------
      workPath: [],
      currMobileName: undefined
    }
  },
  props: {
    districtOptions: {
      type: Array,
      default: () => {
        return []
      }
    },
    taizhanOptions: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
}
</script>

<style scoped>

</style>